import React, { useRef } from 'react'
import { Tabs, theme } from 'antd'
import AddQualityNumber from './addQualityNumber/index'
import AddQualityNumber2 from './addQualityNumber2/index'
import Deliver from './deliver/index'
import Quality from './quality/index'
import QualityAudit from './qualityAudit/index'

const App = () => {
  const DeliverRef = useRef(null)
  const QualityRef = useRef(null)
  const QualityAuditRef = useRef(null)
  let tablsList = [
    {
      tableTitle: '生成质保编号',
      view: <AddQualityNumber />
    },
    {
      tableTitle: '表格生成质保编号',
      view: <AddQualityNumber2 />
    },
    {
      tableTitle: '发货记录',
      view: <Deliver ref={DeliverRef} />
    },
    {
      tableTitle: '质保记录',
      view: <Quality ref={QualityRef} />
    },
    {
      tableTitle: '质保审核',
      view: <QualityAudit ref={QualityAuditRef} />
    }
  ]
  const items = tablsList.map((item, i) => {
    return {
      label: item.tableTitle,
      key: i,
      children: item.view,
      style:
        i === 0
          ? {
              height: 200
            }
          : undefined
    }
  })
  const changFn = (data) => {
    if (data == 2) {
      setTimeout(() => {
        DeliverRef.current.handleChildMethod()
      })
    } else if (data == 3) {
      setTimeout(() => {
        QualityRef.current.handleChildMethod()
      })
    } else if (data == 4) {
      setTimeout(() => {
        QualityAuditRef.current.handleChildMethod()
      })
    }
  }
  const {
    token: { colorBgContainer }
  } = theme.useToken()
  const renderTabBar = (props, DefaultTabBar) => (
    <DefaultTabBar
      {...props}
      style={{
        background: colorBgContainer
      }}
    />
  )
  return (
    <Tabs
      defaultActiveKey="1"
      onChange={changFn}
      renderTabBar={renderTabBar}
      items={items}
    />
  )
}
export default App
